<template>
    <div>
        <el-dialog :title="dataTitle" :visible.sync="dialogVisible" :close-on-click-modal="false" width="420px" center @close="cancelClick">
            <div class="dialog-box">
                <el-form ref="form" :rules="rules" :model="form" label-width="80px">
                    <el-form-item label="姓名" prop="userName">
                        <span v-if="dataType =='detail'">{{ form.userName }}</span>
                        <el-input v-else v-model.trim="form.userName" placeholder="请输入姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="工号" prop="userCode">
                        <span v-if="dataType =='detail'">{{ form.userCode }}</span>
                        <el-input v-else v-model.trim="form.userCode" placeholder="请输入工号"></el-input>
                    </el-form-item>
                    <el-form-item label="账号" prop="jaccountCode">
                        <span v-if="dataType =='detail'">{{ form.jaccountCode }}</span>
                        <el-input v-else v-model.trim="form.jaccountCode" placeholder="请输入账号"></el-input>
                    </el-form-item>
                    <el-form-item label="所属部门" prop="companyName">
                        <span v-if="dataType =='detail'">{{ form.companyName }}</span>
                        <el-select ref="optionRef" v-else @change="companyChange($event)" value-key="id" v-model="form.companyName" filterable placeholder="请选择">
                            <el-option v-for="(item,index) in companyList" :key="item.id" :label="item.companyName" :value="item.companyCode">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="部门编码" prop="companyCode">
                        <span v-if="dataType =='detail'">{{ form.companyCode }}</span>
                        <el-input disabled v-else v-model="form.companyCode" placeholder="请输入部门编码"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" prop="mobile">
                        <span v-if="dataType =='detail'">{{ form.mobile }}</span>
                        <el-input v-else v-model.trim="form.mobile" placeholder="请输入手机号" maxlength="11"></el-input>
                    </el-form-item>
                    <el-form-item label="职位" prop="userPost">
                        <span v-if="dataType =='detail'">{{ form.userPost }}</span>
                        <el-input v-else v-model.trim="form.userPost" placeholder="请输入职位"></el-input>
                    </el-form-item>
                </el-form>
                <div v-if="dataType !='detail'" class="btn-box">
                    <el-button class="btn" @click="cancelClick">取 消</el-button>
                    <el-button class="btn bg-blue" type="primary" @click="comfirmClick">确 定</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {request} from "../assets/js/utils/request";
export default {
    props: ['isDialog','dataTitle','dataType','dataInfo','detailUserId'],
    data() {
        return {
            title: '',
            form: {
                userName: '',
                userCode: '',
                jaccountCode: '',
                companyName: '',
                mobile: '',
                userPost: '',
                companyCode: ''
            },
            rules: {
                userName: [
                    { required: true, message: '请输入申请人', trigger: 'blur' }
                ],
                userCode: [
                    { required: true, message: '请输入工号', trigger: 'blur' }
                ],
                jaccountCode: [
                    { required: true, message: '请输入账号', trigger: 'blur' }
                ],
                companyName: [
                    { required: true, message: '请选择所属单位', trigger: 'change' }
                ],
                mobile: [
                    { required: true, message: '请输入联系电话', trigger: 'blur' }
                ],
                userPost: [
                    { required: true, message: '请输入职位', trigger: 'blur' }
                ],
            },
            dialogVisible: false,
            companyList: []
        }
    },
    created() {
       this.getCompanyList()
    },
    methods: {
        companyChange(val) {
            this.form.companyCode = val
            var obj = {};
            obj = this.companyList.find(function(item) {
                return item.companyCode === val;
            });
            this.form.companyName = obj.companyName
        },
        cancelClick() {
            this.dialogVisible = false
            this.$emit('dialogChange')
        },
        comfirmClick() {
            let txtAction = ''
            let str = ''
            if (!(/^[1]([3-9])[0-9]{9}$/.test(this.form.mobile))) {
                this.$message.error('请输入正确的手机号！');
                return false
            }
            if(this.dataType == 'modify') {
                txtAction = 'update'
                str = '修改成功'
            } else {
                txtAction = 'insert'
                str = '添加成功'
            }
            this.$refs.form.validate((valid) => {
                if (valid) {
                    request({
                        url: '/manager/system/user/userInfoSave.jsp',
                        method: 'post',
                        data: {
                            txtAction,
                            userName: this.form.userName,
                            userCode: this.form.userCode,
                            jaccountCode: this.form.jaccountCode,
                            companyName: this.form.companyName,
                            companyCode: this.form.companyCode,
                            mobile: this.form.mobile,
                            userPost: this.form.userPost,
                            userId: this.dataInfo.userId
                        }
                    }).then(res => {
                        if(res.code == 200) {
                            this.$message({
                                message: str,
                                type: 'success'
                            });
                            this.dialogVisible = false
                            this.$emit('dialogChange')
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                } else {
                    return false;
                }
            });
        },
        getCompanyList() {
            request({
                url: '/manager/system/companyInfo/companyQuery.jsp',
                method: 'post',
                data: {
                    txtAction: 'query',
                    companyName: this.companyName,
                    page: 1,
                    limit: 9999
                }
            }).then(res => {
                if(res.code == 200) {
                    this.companyList = res.data || []
                }
            })
        }
    },
    watch: {
        isDialog(newVal, oldVal) {
            this.dialogVisible = newVal
            this.form.userName = ''
            this.form.userCode = ''
            this.form.jaccountCode = ''
            this.form.companyName = ''
            this.form.companyCode = ''
            this.form.mobile = ''
            this.form.userPost = ''
            if(this.dataType == 'detail' || this.dataType == 'modify') {
                this.form.userName = this.dataInfo.userName
                this.form.userCode = this.dataInfo.userCode
                this.form.jaccountCode = this.dataInfo.jaccountCode
                this.form.companyName = this.dataInfo.companyName
                this.form.companyCode = this.dataInfo.companyCode
                this.form.mobile = this.dataInfo.mobile
                this.form.userPost = this.dataInfo.userPost
            }
        }
    }
}
</script>
<style lang="less" scoped>
    .btn-box{
        text-align: right;
        .btn{
            padding: 0;
            width: 80px;
            height: 32px;
        }
        .bg-blue{
            background: #016aed;
        }
    }
    /deep/.dialog-box{
        .el-input{
            width: 280px;
            .el-input__inner{
                width: 280px;
                height: 32px;
                border-color: #d5d5d5;
            }
        }
    }
</style>